<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 广告管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/ads.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--头部开始-->
		<div id="head-div">

		</div>
		<!--头部结束-->
		<script>
			$("#head-div").load("head.html");
		</script>

		<!-- 页面主体部分 -->
		<div class="container mt-2">
			<div class="h4 border-bottom">
				<span>广告管理</span>
				<a href="#modal-add-ads" class="btn btn-sm btn-outline-success float-right py-0" data-toggle="modal">新增广告</a>
			</div>

			<table class="table table-sm table-hover table-striped">
				<thead class="thead-dark">
					<th>#</th>
					<th class="d-none d-md-table-cell">链接</th>
					<th class="d-none d-md-table-cell">标题</th>
					<th class="d-none d-md-table-cell">描述</th>
					<th>操作</th>
				</thead>
				<tbody id="tbody">

				</tbody>
			</table>
		</div>

		<!-- 添加广告模态框部分 -->
		<div id="modal-add-ads" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>新增广告</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-ads" >
							<div class="form-group">
								<label>
									<img id="photo" src="../img/slides/web-101-101-1.jpg" class="img-thumbnail" />
								</label>
								<input name="img" id="img" type="file" accept="image/*" hidden="hidden" />
								<div class="text-muted small">* 点击设置图片</div>


							</div>

							<div class="form-group form-row">
								<label class="col-form-label">链接</label>
								<input type="text" class="col form-control" name="url"/>
							</div>
							<div class="form-group form-row">
								<label class="col-form-label">标题</label>
								<input type="text" class="col form-control" value="" list="target-list" name="title"/>
							</div>
							<div class="form-group form-row">
								<label class="col-form-label">描述</label>
								<textarea class="col form-control" name="remark"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-ads" type="button" id="tj-btn">新增广告</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //添加广告模态框部分结束 -->

		<!-- 编辑广告模态框部分 -->
		<div id="modal-edit-ads" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							<span class="sr-only">关闭</span>
						</button>
						<div class="modal-title">
							<span class="glyphicon glyphicon-edit"></span>
							<span>编辑广告</span>
						</div>
					</div>
					<div class="modal-body">
						<form id="form-edit-ads" >
							<div class="form-group">
								<label>
									<img id="photo-update" src="" class="img-thumbnail" />
								</label>
								<input name="img" id="img-update" type="file" accept="image/*" hidden="hidden" />
								<div class="text-muted small">* 点击设置图片</div>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label">链接</label>
								<input type="text" class="col form-control" name="url"/>
								<input type="hidden" class="col form-control" name="id"/>
							</div>
							<div class="form-group form-row">
								<label class="col-form-label">标题</label>
								<input type="text" class="col form-control" value="" list="target-list" name="title"/>
							</div>
							<div class="form-group form-row">
								<label class="col-form-label">描述</label>
								<textarea class="col form-control" name="remark"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-ads" type="button" id="tj-update">更新广告</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑广告模态框部分结束 -->

		<!-- 用于添加/编辑广告时“链接目标”字段的选项集 -->
		<datalist id="target-list">
			<option value="_top">默认(_top)</option>
			<option value="_blank">_blank</option>
			<option value="_parent">_parent</option>
			<option value="_search">_search</option>
			<option value="_self">_self</option>
		</datalist>

		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<!--脚部分开始-->
		<div id="footer-div">

		</div>
		<!--脚部分结束-->
		<script>
			$("#footer-div").load("footer.html");
		</script>
		<!-- //页面脚部部分结束 -->

	</body>

</html>
